import React, { useEffect, useState } from 'react'
import './detailStyle.less'
import CommonHead from '@/components/CommonHead/CommonHead';
import { Swiper, Button, Popup, Stepper, Toast } from 'antd-mobile';
import { getItemDetail } from '@/api';
import { useSearchParams } from '@/.umi/exports';


export default function Page() {

    const [searchParams] = useSearchParams()

    // 商品数据 详情数据
    const [basicInfo, setBasicInfo] = useState<any>({})
    const [content, setcontent] = useState<any>('') // 商品详情内容
    const [pics, setpics] = useState<any[]>([])
    // 商品规格
    const [Sku, setSku] = useState<any>({})

    // 商品详情数据 获取
    const fetchItemDetail = () => {
        getItemDetail({
            // 获取传递参数
            id: searchParams.get('id')
        }).then(res => {
            if (res.data.code === 0) {
                const { basicInfo, content, pics } = res.data.data
                // 修改赋值
                setBasicInfo(basicInfo)
                setcontent(content)
                setpics(pics)
                // 商品规格弹窗 赋值
                setSku({
                    // 在商品详情加上 number即商品购买数量
                    ...basicInfo,
                    number: 1
                })
            }
        })
    }

    useEffect(() => {
        // 商品数据 详情数据
        fetchItemDetail()
    }, [])


    // 控制商品规格弹出
    const [showIku, setShowIku] = useState(false)
    // 判断是 加入购物车 还是 立即购买 才弹出的 规格层
    const [actionType, setActionType] = useState(0) // 0购物车 1立即购买

    const showIkuAction = (type: number) => {
        setShowIku(true)
        setActionType(type)
    }

    // 点击弹出层 确定按钮
    const cinfirmAction = () => {
        if (actionType === 0) {
            Toast.show({
                icon: 'success',
                content: '加入购物车成功',
            })
        }
        if (actionType === 1) {
            Toast.show({
                icon: 'success',
                content: '正在进入 立即购买 页面',
            })
        }
        // 确定后 商品规格层 隐藏
        setShowIku(false)
    }


    return (
        <div>
            {/* 公共组件 头部 返回上一页效果 */}
            <CommonHead title={basicInfo.name || '详情页'} />

            <div className="detail-container">
                {/* Swiper 轮播 */}
                <Swiper autoplay loop>
                    {
                        pics.map(banner => (
                            <Swiper.Item key={banner.id}>
                                <img src={banner.pic} alt="" />
                            </Swiper.Item>
                        ))
                    }
                </Swiper>

                {/* 其它详情信息 */}
                {/* <h2>{basicInfo.name}</h2> */}
                {/* 在头部上 使用 传递给 子组件头部 */}
                {/* 详情内容  */}
                <div
                    className="content"
                    dangerouslySetInnerHTML={
                        { __html: content }
                    }
                ></div>

                {/* 下方底部 加入购物车 立即购买 操作区 */}
                <div className="action-bar">
                    <Button
                        block
                        size='large'
                        color='danger'
                        onClick={() => {
                            showIkuAction(0)
                        }}
                    >加入购物车</Button>
                    <Button
                        block
                        size='large'
                        color='danger'
                        onClick={() => {
                            showIkuAction(1)
                        }}
                    >立即购买</Button>
                </div>

                {/* 加入购物车 立即购买 操作区 对应的 商品规格弹出层 */}
                <Popup
                    visible={showIku}
                    onMaskClick={() => {
                        setShowIku(false)
                    }}
                    bodyStyle={{ height: '36vh' }}
                >
                    <div className="sku-container">
                        <img src={Sku.pic} alt="" />
                        <div className="sku-info">
                            <h5>{Sku.name}</h5>
                            <p style={{ color: "red" }}>￥{Sku.minPrice}</p>
                            <div style={{ color: "red" }}>数量：{Sku.number}</div>
                            <Stepper
                                defaultValue={1}
                                onChange={value => {
                                    // 双向绑定修改自动刷新
                                    setSku({
                                        ...Sku,
                                        number: value
                                    })
                                }}
                            />
                        </div>
                    </div>
                    <div className='buttonConfirm'>
                        <Button
                            block
                            size='large'
                            color='danger'
                            onClick={
                                cinfirmAction
                            }
                            style={{ display: 'block' }}
                        >
                            确定
                        </Button>
                    </div>
                </Popup>

            </div>
        </div>
    )
}
